<template>
    <div style="padding: 20px">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'user/ques' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'writeQues' }">问卷列表</el-breadcrumb-item>
            <el-breadcrumb-item>问卷详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="header" style="margin-top: 20px;font: 18px large;">
            问卷名称：
            <span>{{paperData.title}}</span>
        </div>
        <div class="header" style="margin-top: 20px;font: 15px Extra Small;display: inline-block">
            问卷描述：
            <span>{{paperData.descri}}</span>
        </div>

        <el-button style="float:right;margin-right: 30px;margin-top: 20px;display: inline-block;width: 70px"
                   size="small"
                   type="primary">
            <span>保存</span>
        </el-button>


        <el-divider/>
        <div class="header" style="font: 15px Extra Small;">
            问卷内容：
        </div>
        <br>

        <el-form
                class="questions"
                ref="customerForm"
                :model="paperData"
                label-position="top"
        >

        <span v-for="(question, index) in questionsPage" :key="index">

             <el-form-item
                     style="text-align: left;"
                     :rules="rules[question.questionType]"
                     :prop="`questionsPage.${index}.answerContents`">

                <!--单选题-->
                <div v-if="question.questionType === '1'">
                 第{{question.questionNo}}题(单选题)：{{question.questionTitle}}
                <br/>
                <el-radio-group v-model="question.answerContents">
                <div v-for="(questionOption,index2) in question.questionOption" :key="index2"
                     style="width: 520px;display: inline-block;">
                <el-radio :label="questionOption">{{questionOption}}</el-radio>
                <br/>
                </div>
                </el-radio-group>
                </div>
                 <!--多选题-->
                <div v-else-if="question.questionType === '2'">
                 第{{question.questionNo}}题(多选题)：{{question.questionTitle}}
                <br/>
                <el-checkbox-group v-model="question.answerContents">
                <div v-for="(questionOption,index2) in question.questionOption" :key="index2">
                <el-checkbox :label="questionOption">{{questionOption}}</el-checkbox>
                </div>
                </el-checkbox-group>
                <br/>
                </div>
                 <!--问答题-->
                 <span v-else="question.questionType === '3'">
                 第{{question.questionNo}}题(问答题)：{{question.questionTitle}}
                     <br/>
                       <el-input style="width: 60%;margin-top: 20px"
                                 type="textarea"
                                 size="medium"
                                 rows="2"
                                 v-model="question.answerContents"/>
                </span>
                <br/>
                <br/>

               <el-divider/>
            </el-form-item>
        </span>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paperData.questions.length">
            </el-pagination>
            <el-form-item>
                <el-button type="primary" size="large" @click="submitAnswer()">
                    完成填写！
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {quesAnswer} from "../../../api/paperMG";

    export default {
        name: "ques-detail",
        data() {
            const rules = {
                '1': [
                    {  required: true, trigger: 'change', message: '必须选择一个' }
                ],
                '2': [
                    { type: 'array', required: true, trigger: 'change', message: '多选至少选一个' }
                ],
                '3': [
                    { required: true, trigger: 'blur', message: '输入不可为空' }
                ]
            };
            return {
                paperData: [],
                show3: false,
                //分页
                currentPage: 1, //初始页
                pageSize: 10,    //每页的数据
                //数据显示
                isShow: false,
                radio: '',
                checkList: [],
                rules
            }
        },
        created() {
            console.log("this.$route.params==>", this.$route.params);
            this.paperData = this.$route.params;
            console.log("paperData==>", this.paperData);
        },
        methods: {
            // 初始页currentPage、初始每页数据数pageSize和数据data
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            submitAnswer() {
                console.log("<===========this.paperData===========>");
                console.log(this.paperData);
                const answer = {
                    paperId : this.paperData.paperId,
                    userInfo : localStorage.getItem("JWT_TOKEN"),
                    answers : this.paperData.questions
                };
                console.log("<===========answer===========>");
                console.log(answer);
                quesAnswer(answer).then(res=>{
                    if (res.code === 200) {
                        this.$message.success('填写完成，问卷提交成功！');
                        this.$router.push({name:"WriteQues"})
                    }
                });

            }
        },
        computed: {//分页
            questionsPage: function () {
                return this.paperData.questions.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            }
        }
    }
</script>

<style scoped>
    .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
    }

    .el-pagination {
        text-align: center;
    }

</style>